<?php
require_once 'common.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Online PC</title>
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <link rel="stylesheet" href="css/jquery-ui-1.8.11.custom.css" type="text/css" />

        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>

        <script type="text/javascript" src="js/hint.js"></script>

        <script type="text/javascript" src="js/common.js"></script>

        <script type="text/javascript" src="fck/ckeditor.js"></script>
        <script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
        
    </head>
    <body style="background: transparent url(images/background_inside.png) no-repeat center top;">
        <table cellspacing="0" cellpadding="0" border="0" width="900" style="margin-left: auto; margin-right: auto;">
            <tr>
                <td valign="middle" style="height: 130px;">
                    <?php banner('register'); ?>
                </td>
            </tr>
            
            <tr>
                <td valign="middle" style="height: 52px;">
                    <?php login(); ?>
                </td>
            </tr>
            <tr><td style="height: 50px;"></td></tr>
            <tr>
                <td valign="top" style="height: 500px;">
                    <table cellspacing="0" cellpadding="0" border="0" width="100%">
                        <tr>
                            <td valign="top">
                                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                                    <tr>
                                        <td style="border-bottom: 1px solid #f0f0f0; height: 27px;" valign="top"><h3 style="margin: 0px;">Upload Product Photo</h3></td>
                                    </tr>
                                    <tr>
                                        <td valign="top">

                                            <table cellspacing="3" cellpadding="5" border="0" id="table1" width="100%">
                                                <tr><td colspan="3" height="20"><div id="msg"></div></td></tr>
                                                <tr>
                                                    <td>
                                                        <input type="button" id="upload_button" class="rounded_corner" value="Upload File" /><br/><br/>
                                                        <span id="status_message" ></span>
                                                        <div id="files_list" style="padding-right: 80px;" >
                                                            <?php
                                                                $query = $db->query("SELECT * FROM product_image WHERE product_id=".@$_GET['i']);
                                                                $html_str = '<table class="files">';
                                                                while($row = $db->fetch($query)){                                                                    
                                                                    $html_str .= '<td><img src="images/'.$row['product_image_name'].'" width="100" /></td>';
                                                                }
                                                                $html_str .= '</table>';
                                                                echo $html_str;
                                                            ?>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr><td height="30"></td></tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr><td style="height: 10px;"></td></tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>

                </td>
            </tr>
        </table
        <?php footer() ?>
    </body>
</html>
<script type="text/javascript">

$(document).ready(function(){
    
    var btnUpload   = $('#upload_button');
    var status      = $('#status_message');
    new AjaxUpload(btnUpload, {
        action: 'library/upload_file.php?i=<?php echo @$_REQUEST['i'] ?>',
        name: 'uploadfile',
        onSubmit: function(file, ext){
            if (! (ext && /^(pdf|jpg|png|jpeg|gif)$/.test(ext))){
                // extension is not allowed
                status.text('Only JPG, PNG or GIF files are allowed');
                return false;
            }
            //status.html('<img src="../../template/member/images/loading.gif" />');
        },
        onComplete: function(file, response){            
            //On completion clear the status
            status.text('');            
            var result  = response;
            var arr     = result.split('~');            
            if(arr[1]=='success'){                
                $('.files').remove();
                $('#files_list').html(arr[0]);
                //$('<li></li>').appendTo('#files_list').html('<img src="images/'+file+'" alt="" /><br />'+file).addClass('success');
            } else{
                $('<li></li>').appendTo('#files_list').text(file).addClass('error');
            }
        }
    });
});

</script>